<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .login {
            width: 400px;
            height: 150px;
            background-color: skyblue;
            cursor: move;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div class="login">
        <h3 id="title">登录页面</h3>
        用户名:<input type="text"><br>
        密码:<input type="text">
    </div>
</body>
<script>
    // 获取元素 注册事件
    let title = document.querySelector('#title');
    let login = document.querySelector('.login');
    // 我们希望在点击 title 标题之后 整个登录页面能够实现拖动效果
    // 首先我们先让没有点击title之前登录页面是禁止拖动的
    let isCanmove = false;
    let tempX;
    let tempY;
    login.onmousedown = function (e) {
        // console.log('可以拖动了')
        isCanmove = true;
        // 每次点击title之后登录页面会不规则的跳动 用户体验效果不好 我们这里要拿到每次点击的位置
         tempX = e.pageX - login.offsetLeft;
         tempY = e.pageY - login.offsetTop;
         console.log(tempX,tempY);
    }
    // 我们希望登录页面能够随着鼠标的移动而移动 并且是在整个 body 页面上可动 
    // 首先要获取到鼠标的坐标位置 页面可视坐标 
    document.onmousemove = function (e) {
        // 判断如果 isCanmove 等于true了 就允许页面拖动
        if (isCanmove) {
            let X = e.pageX;
            let Y = e.pageY;
            // 将鼠标坐标位置赋予给登录页面
            login.style.top = Y - tempY + 150 + 'px';
            login.style.left = X - tempX + 200 + 'px';
        }


    }
    // 鼠标松开之后登录页面不再可动
    document.onmouseup = function(){
        isCanmove = false;
    }
</script>

</html>